<template>
  <div ref="print" style="width: 100%; margin: 0 auto">
    <div v-for="(items, index) in list" :key="index + 100">
      <!-- <div style="margin-top: 10px">&nbsp;</div> -->
      <div class="item" style="display: flex; width: 100; align-items: center; justify-content: center">
        <div class="l" style="padding-left: -30px"><img :src="data.title" width="200px" height="15px" /></div>
        <div class="r" style="padding-left: 20px; font-size: 24px">索赔件出库清单</div>
      </div>
      <!-- <div style="margin-top: 1px">&nbsp;</div> -->
      <div style="display: flex; justify-content: space-around" class="fs12">
        <div class="item" style="display: flex; justify-content: space-between">
          <div class="l">旧件仓库：</div>
           <div class="r"><u>{{data.warehouse}}</u></div>
        </div>
        <div class="item" style="display: flex;">
          <div class="l">出库日期：</div>
          <div class="r">
            <u>{{ data.printDate }}</u>
          </div>
        </div>
        <div class="item" style="display: flex; justify-content: space-between">
          <div class="l">出库类型：</div>
          <div class="r"><u>{{ data.type }}</u></div>
        </div>
        <div class="item" style="display: flex; justify-content: space-between">
          <div class="l">供应商名称：</div>
          <div class="r"><u>{{ data.supName }}</u></div>
        </div>
        <div class="item" style="display: flex; justify-content: space-between">
          <div class="l">领件人：</div>
          <div class="r"><u>{{ data.receiver }}</u></div>
        </div>
        <div class="item" style="display: flex; justify-content: space-between">
          <div class="l">联系电话：</div>
          <div class="r"><u>{{ data.phone }}</u></div>
        </div>
        <div style="padding-left: 30px; padding-right: 10px">{{ items.index }}/ {{ number }}</div>
      </div>
      <div style="margin-top: 1px">&nbsp;</div>
      <table class="bor fs12" style="width: calc(100% - 40px); margin-left: 25px;margin-right: 25px; table-layout: fixed">
        <tr>
          <td align="center" style="width: 3%">序号</td>
          <td align="center" style="width: 10%">索赔单号</td>
          <td align="center" style="width: 8%">分类</td>
          <td align="center" style="width: 8%">配件件号</td>
          <td align="center" style="width: 10%">配件名称</td>
          <td align="center" style="width: 3%">数量</td>
          <td align="center" style="width: 14%">VIN码</td>
          <td align="center" style="width: 6%">责任件</td>
          <td align="center" style="width: 5%">备注</td>
        </tr>
      </table>
      <table class="bor fs12" style="width: calc(100% - 40px); margin-left: 25px;margin-right: 25px; margin-top: 0.5px; table-layout: fixed">
        <div v-for="(item, index) in items.arr" :key="index">
          <tr>
            <td align="center" style="width: 3%">{{ index + 1 }}</td>
            <td align="center" style="width: 10%">{{ item.d1 }}</td>
            <td align="center" style="width: 8%">{{ item.d2 }}</td>
            <td align="center" style="width: 8%">{{ item.d3 }}</td>
            <td align="center" style="width: 10%">{{ item.d4 }}</td>
            <td align="center" style="width: 3%">{{ item.d5 }}</td>
            <td align="center" style="width: 14%">{{ item.d6 }}</td>
            <td align="center" style="width: 6%">{{ item.d7 }}</td>
            <td align="center" style="width: 5%">{{ item.d8 }}</td>
          </tr>
        </div>
      </table>
      <!-- <div style="page-break-after: always">&nbsp;</div> -->
    </div>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  name: 'templateReturnList',
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
    isPreview: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD'),
      list: [],
    };
  },
  computed: {},
  created() {
    this.handle();
  },
  mounted() {
    this.$emit('onPrintTable', this.$refs.print.innerHTML);
    if (this.isPreview) {
      this.fillInToDom();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },
    handle() {
      if (this.data.appId == "beijing") {
        this.data.title = require('@/assets/img/beijing.png');
      } else {
        this.data.title = require('@/assets/img/arcfox.png');
      }
      // this.data.type = '正常';
      // this.data.supName = '供应商';
      // this.data.receiver = '库管人员';
      // this.data.phone = '13012345678';
      // this.data.warehouse = '北京仓库';
      // this.data.printDate = '2020 年 02 月 01日';
      // for (let i = 0; i < 50; i++) {
      //   this.data.rows.push({
      //     d1: 'JS101010101010',
      //     d2: '正常保修',
      //     d3: 'M000000687',
      //     d4: '起动机总成',
      //     d5: '1',
      //     d6: 'LNJIUHOH1234567891',
      //     d7: '责任件',
      //     d8: '0',
      //   });
      // }
      let number = Math.ceil(this.data.rows.length / 40);
      this.number = number;
      for (let i = 1; i <= number; i++) {
        if (number == i) {
          let obj = {};
          obj.arr = this.data.rows.splice(0, this.data.rows.length);
          obj.index = i;
          this.list.push(obj);
        } else {
          let obj = {};
          obj.arr = this.data.rows.splice(0, 40);
          obj.index = i;
          this.list.push(obj);
        }
      }
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
